<template>
  <div>
    <h1 style="color:white;font-size:20px;position:absolute;left:90px;top:5px;">历史数据</h1>
    <div class="mt-4" style="position: absolute;top:7px;right:300px;">
      <el-button type="primary" @click='getAll' plain style="position:absolute;top:0px;left: -80px;">全部</el-button>
      <el-input v-model="searchName" style="max-width: 700px" placeholder="Please input" class="input-with-select">
        <template #append>
          <el-button :icon="Search" @click="SearchAPK" />
        </template>
      </el-input>
    </div>
    <hr style="position:absolute;width:96%;top:45px;left:2%;height:1px;" />
    <el-table :data="historyData" border style="width: 90%;height:580px;position:absolute;top:55px;left:5%;">
      <el-table-column fixed prop="apkName" label="apkName" width="250" />
      <el-table-column prop="picture" label="图标" width="150">
        <template #default="scope">
          <img :src="scope.row.picture" style="width:50px;" />
        </template>
      </el-table-column>
      <el-table-column prop="targetVersion" label="版本号" width="180" />
      <el-table-column prop="fingerPrint" label="特征指纹" width="200" />
      <el-table-column prop="packageName" label="包名" width="200" />
      <el-table-column prop="type" label="类型" width="100"
        :filters="[{ text: '正常', value: 0 }, { text: '诈骗', value: 1 }, { text: '赌博', value: 2 }, { text: '涉黄', value: 3 }]"
        :filter-method="filterTag">
        <template #default="scope">
          <el-tag class="table-tag" type="primary" v-if="scope.row.type=== 0">正常</el-tag>
          <el-tag class="table-tag" type="danger" effect="dark" v-else-if="scope.row.type === 1">诈骗</el-tag>
          <el-tag class="table-tag" type="danger" effect="dark" v-else-if="scope.row.type === 2">赌博</el-tag>
          <el-tag class="table-tag" type="danger" effect="dark" v-else-if="scope.row.type === 3">涉黄</el-tag>
          <el-tag class="table-tag" type="info" effect="dark" v-else>未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="LookRow(scope.apkName)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
const store = useStore();
const searchName = ref('')
import { serverAddress } from '@/config'
function LookRow(Name){
    let url1 = `/Main/DetectionResult/${Name}`;  //对接口的时候要改param1
    // 使用window.open打开新标签页  
    window.open(url1, '_blank');  
}
function SearchAPK() {
  axios({
    url: 'https://apifoxmock.com/m2/4743995-0-default/193563731',
    // url:`${serverAddress}/apk/GetAPKListByUserIdAndApkName`,
    method: 'GET',
    params: {
      userId: store.state.UserInformation.Id,
      apkName:searchName.value,
    }
  }).then((response) => {
    historyData.value = response.data.data;
  }).catch((error)=>{
    console.log('数据获取失败',error)
    ElMessage({
        message: '数据获取失败',
        type: 'warning',
        })
  })
}
const historyData = ref([])
onMounted(() => {
  getAllHistoryData();
})

function getAll(){
  getAllHistoryData();
}
function getAllHistoryData(){
  axios({
    url: 'https://apifoxmock.com/m2/4743995-0-default/193562227',
    // url:`${serverAddress}/apk/GetAPKListByUserId?userId=${sessionStorage.getItem('ID')}`,
    method: 'GET',
   
  }).then((response) => {
    historyData.value = response.data.data;
  }).catch((error)=>{
    console.log('历史数据获取失败',error)
    ElMessage({
        message: '历史数据获取失败',
        type: 'warning',
        })
  })
}
const filterTag = (value, row) => {
    return row.type === value;
}
</script>
<style scoped>
.el-table {
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0.9;
}

::v-deep(.el-table .el-table__header-wrapper th) {
  background-color: #ffffff;
  color: #717171;
  font-size: 15px;
  text-align: center;
}

::v-deep(.el-table .el-table__body-wrapper tr td) {
  background-color: #e0e0e0;
  color: #969696;
  font-size: 15px;
  font-weight: 500;
}
</style>
